<template>
	<div class="news-center">
		<div class="banner"></div>
		<div class="tab-box">
			<div class="tab-wrap">
				<div class="tab-menu">
					<div class="tab-item" :class="[newsType == 1 ? 'active' : '']" @click="handleNewsClick(1)">图片新闻</div>
					<div class="tab-item" :class="[newsType == 2 ? 'active' : '']" @click="handleNewsClick(2)">视频新闻</div>
					<div class="tab-item" :class="[newsType == 3 ? 'active' : '']" @click="handleNewsClick(3)">文字新闻</div>
				</div>
				<div class="search">
					<el-input v-model="keywords" placeholder="请输入关键字"></el-input>
					<div class="search-btn">
						<img src="@/assets/images/icons/search.png" alt="">
					</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="content-wrap">
				<div class="content-box">
					<div class="news-content" v-if="newsType == 1">
						<div class="image-card" v-for="(item, index) in imageNewsList" :key="index" @click="handleNewsDetail(item,'img')">
							<div class="image-box">
								<img :src="item.imageUrl" alt="">
							</div>
							<div class="news-title">{{ item.title }}</div>
							<div class="news-desc">{{ item.desc }}</div>
							<div class="news-date"><i class="el-icon-alarm-clock"></i><span>{{ item.date }}</span></div>
						</div>
					</div>
					<div class="news-content" v-else-if="newsType == 2">
						<div class="video-card" v-for="(item, index) in videoNewsList" :key="index" @click="handleNewsDetail(item,'video')">
							<div class="image-box">
								<img class="video-img" :src="item.imageUrl" alt="">
							</div>
							<img src="@/assets/images/icons/play.png" alt="" class="paly-btn">
							<div class="news-title">{{ item.title }}</div>
							<div class="news-date"><i class="el-icon-alarm-clock"></i><span>{{ item.date }}</span></div>
						</div>
					</div>
					<div class="news-content" v-else>
						<div class="text-card" v-for="(item, index) in textNewsList" :key="index" @click="handleNewsDetail(item,'text')">
							<div class="date-box">
								<div class="day">{{item.date.slice(8)}}</div>
								<div class="date">{{item.date.slice(0,7)}}</div>
							</div>
							<div class="content-box">
								<div class="title">{{ item.title }}</div>
								<div class="desc">{{ item.desc }}</div>
							</div>
						</div>
					</div>
					<pagination
					class="page"
					v-show="total>0"
					:total="total"
					:layout="'total, prev, pager, next'"
					:page.sync="pages.pageNum"
					:limit.sync="pages.pageSize"
					@pagination="pageCourse"
					/>
				</div>
				<div class="sub-content-box">
					<div class="leader-board">
						<div class="leader-head"><img src="@/assets/images/icons/leader.png" alt="">热点新闻排行</div>
						<div class="leader-content">
							<div class="leader-item" v-for="(item, index) in hotData" :key="index">
								<i class="dot"></i>
								<div class="title">{{ item.title }}</div>
								<div class="likes">{{ item.likes }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'NewsCenter',
	data() { 
		return {
			//检索关键字
			keywords: '',
			//当前展示类型
			newsType: 1,
			//数据
			imageNewsList: [],
			videoNewsList: [],
			textNewsList: [],
			//热点排行
			hotData: [],
			//总数
			total: 100,
			//分页
			pages: {
				pageNum: 1,
				pageSize: 9,
			}
		}
	},
	mounted() { 
		this.queryImageNewsData();
		this.queryVideoNewsData();
		this.queryTextNewsData();
		this.queryHotData();
	},
	methods: {
		/**
		 * 类型切换
		 */
		handleNewsClick(type) { 
			this.newsType = type;
		},
		/**
		 * 查询数据
		 */
		queryImageNewsData() { 
			let dataList = [
				{
					id: 1,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。茶话会由学院副处级组织员沈鹏主持。',
					imageUrl: require('@/assets/images/news/001.jpg')
				},
				{
					id: 2,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。茶话会由学院副处级组织员沈鹏主持。',
					imageUrl: require('@/assets/images/news/002.jpg')
				},
				{
					id: 3,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。茶话会由学院副处级组织员沈鹏主持。',
					imageUrl: require('@/assets/images/news/001.jpg')
				},
				{
					id: 4,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。茶话会由学院副处级组织员沈鹏主持。',
					imageUrl: require('@/assets/images/news/002.jpg')
				},
				{
					id: 5,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。茶话会由学院副处级组织员沈鹏主持。',
					imageUrl: require('@/assets/images/news/001.jpg')
				},
				{
					id: 6,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。茶话会由学院副处级组织员沈鹏主持。',
					imageUrl: require('@/assets/images/news/002.jpg')
				},
				{
					id: 7,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。茶话会由学院副处级组织员沈鹏主持。',
					imageUrl: require('@/assets/images/news/001.jpg')
				},
				{
					id: 8,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。茶话会由学院副处级组织员沈鹏主持。',
					imageUrl: require('@/assets/images/news/002.jpg')
				},
				{
					id: 9,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。茶话会由学院副处级组织员沈鹏主持。',
					imageUrl: require('@/assets/images/news/001.jpg')
				}
			];
			this.imageNewsList = dataList;
		},
		queryVideoNewsData() { 
			let dataList = [
				{
					id: 1,
					title: '学校举办2024年秋季双选会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '',
					imageUrl: require('@/assets/images/news/v001.jpg'),
					videoUrl: ''
				},
				{
					id: 2,
					title: '2024年校运会精彩瞬间回顾',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '',
					imageUrl: require('@/assets/images/news/v002.jpg'),
					videoUrl: ''
				},
				{
					id: 3,
					title: '2024年校运会开幕',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '',
					imageUrl: require('@/assets/images/news/v003.jpg'),
					videoUrl: ''
				},
				{
					id: 4,
					title: '学校举办2024年秋季双选会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '',
					imageUrl: require('@/assets/images/news/v001.jpg'),
					videoUrl: ''
				},
				{
					id: 5,
					title: '2024年校运会精彩瞬间回顾',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '',
					imageUrl: require('@/assets/images/news/v002.jpg'),
					videoUrl: ''
				},
				{
					id: 6,
					title: '2024年校运会开幕',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '',
					imageUrl: require('@/assets/images/news/v003.jpg'),
					videoUrl: ''
				},
				{
					id: 7,
					title: '学校举办2024年秋季双选会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '',
					imageUrl: require('@/assets/images/news/v001.jpg'),
					videoUrl: ''
				},
				{
					id: 8,
					title: '2024年校运会精彩瞬间回顾',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '',
					imageUrl: require('@/assets/images/news/v002.jpg'),
					videoUrl: ''
				},
				{
					id: 9,
					title: '2024年校运会开幕',
					date: '2025-01-16',
					origin: '文法学院',
					desc: '',
					imageUrl: require('@/assets/images/news/v003.jpg'),
					videoUrl: ''
				}
			];
			this.videoNewsList = dataList;
		},
		queryTextNewsData() { 
			let dataList = [
				{
					id: 1,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: `1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。
					茶话会由学院副处级组织员沈鹏主持。院长吴椒军首先代表学院全体师生向退休教师致以最诚挚的问候和衷心的感谢。`
				},
				{
					id: 2,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: `1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。
					茶话会由学院副处级组织员沈鹏主持。院长吴椒军首先代表学院全体师生向退休教师致以最诚挚的问候和衷心的感谢。`
				},
				{
					id: 3,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: `1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。
					茶话会由学院副处级组织员沈鹏主持。院长吴椒军首先代表学院全体师生向退休教师致以最诚挚的问候和衷心的感谢。`
				},
				{
					id: 4,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: `1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。
					茶话会由学院副处级组织员沈鹏主持。院长吴椒军首先代表学院全体师生向退休教师致以最诚挚的问候和衷心的感谢。`
				},
				{
					id: 5,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: `1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。
					茶话会由学院副处级组织员沈鹏主持。院长吴椒军首先代表学院全体师生向退休教师致以最诚挚的问候和衷心的感谢。`
				},
				{
					id: 6,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					origin: '文法学院',
					desc: `1月15日，文法学院隆重举行退休教师新春茶话会。学院领导班子成员、退休教师、青年师生代表欢聚一堂，笑语盈盈，共忆往昔风华岁月,同绘未来宏伟篇章。
					茶话会由学院副处级组织员沈鹏主持。院长吴椒军首先代表学院全体师生向退休教师致以最诚挚的问候和衷心的感谢。`
				}
			];
			this.textNewsList = dataList;
		},
		/**
		 * 热点排行
		 */
		queryHotData() { 
			let hotDataList = [
				{ id: 1, title: '校长项延训开展校内调研走访', likes: 1920 },
				{ id: 2, title: '市教委来校调研推进重点学科建设工作', likes: 1811 },
				{ id: 3, title: '文法学院举办退休教师新春茶话会', likes: 1700 },
				{ id: 4, title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式', likes: 1634 },
				{ id: 5, title: '关于2025年寒假相关事项安排的通', likes: 1554 },
				{ id: 6, title: '关于2025年元旦放假安排的通知', likes: 1421 },
				{ id: 7, title: '中国工程院副院长钟志华院士来校', likes: 1307 },
				{ id: 8, title: '校长项延训开展校内调研走访', likes: 1212 },
				{ id: 9, title: '校长项延训开展校内调研走访', likes: 1100 },
				{ id: 10, title: '校长项延训开展校内调研走访', likes: 960 },
				{ id: 12, title: '校长项延训开展校内调研走访', likes: 833 },
				{ id: 13, title: '校长项延训开展校内调研走访', likes: 711 }
			];
			this.hotData = hotDataList;
		},
		/**
		 * 分页
		 */
		pageCourse() { 
			let s = (this.pages.pageNum - 1) * this.pages.pageSize;
			let e = this.pages.pageNum * this.pages.pageSize;
			// this.courseList = this.allCourseList.slice(s, e);
		},
		/**
		 * 详情
		 * @param item 
		 * @param type 
		 */
		handleNewsDetail(item, type) { 
			this.$router.push({
				path: '/webDetail',
				query: {
					id: item.id,
					type
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.news-center {
	width: 100%;
	min-height: 760px;
	.banner {
		width: 100%;
		height: 140px;
		background-image: url('~@/assets/images/list-banner.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: -100px;
	}
	.tab-box {
		width: 100%;
		height: 60px;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		.tab-wrap {
			display: flex;
			width: 1460px;
			height: 100%;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		.tab-menu {
			display: flex;
			height: 100%;
			flex-direction: row;
			align-items: center;
			.tab-item {
				display: flex;
				font-size: 18px;
				font-weight: bold;
				width: 150px;
				text-align: center;
				transition: all .2s;
				cursor: pointer;
				letter-spacing: 2px;
				&.active {
					color: #a6292f;
					font-size: 20px;
				}
			}
		}
		.search {
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #ccc;
			img {
				cursor: pointer;
			}
		}
	}
	.tab-content {
		width: 100%;
		background: rgba(255,255,255, .9);
		.content-wrap {
			display: flex;
			flex-direction: row;
			width: 1460px;
			margin: 0 auto;
			padding: 30px 0;
			.content-box {
				width: calc(100% - 360px);
			}
			.sub-content-box {
				width: 360px;
			}
		}
	}
	.news-content {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.image-card {
			width: 345px;
			height: 435px;
			background-color: #fff;
			padding: 25px;
			margin: 0 20px 20px 0;
			transition: all 0.3s;
			cursor: pointer;
			&:hover {
				box-shadow: 0 13px 24px 0 rgba(0, 0, 0, 0.1);
				border-bottom: 2px solid #a6292f;
				img {
					transform: scale(1.2);
				}
			}
			.image-box {
				width: 295px;
				height: 180px;
				overflow: hidden;
				> img {
					width: 100%;
					height: 100%;
					transition: all 0.3s;
				}
			}
			.news-title {
				height: 48px;
				font-size: 16px;
				color: #404040;
				line-height: 24px;
				margin-bottom: 20px;
				margin-top: 25px;
			}
			.news-desc {
				font-size: 12px;
				color: #656565;
				line-height: 20px;
				margin-bottom: 20px;
			}
			.news-date {
				display: flex;
				flex-direction: row;
				align-items: center;
				> i {
					color: #a6292f;
				}
				> span {
					font-size: 12px;
					color: #656565;
					padding-left: 10px;
				}
			}
		}
		.video-card {
			width: 345px;
			height: 345px;
			background-color: #fff;
			margin: 0 20px 20px 0;
			transition: all 0.3s;
			cursor: pointer;
			position: relative;
			&:hover {
				box-shadow: 0 13px 24px 0 rgba(0, 0, 0, 0.3);
				.video-img {
					transform: scale(1.2);
				}
			}
			.paly-btn {
				width: 47px;
				position: absolute;
				right: 20px;
				top: 197px;
				z-index: 99;
			}
			.image-box {
				width: 100%;
				height: 220px;
				overflow: hidden;
				> img {
					width: 100%;
					height: 100%;
					transition: all 0.3s;
				}
			}
			.news-title {
				height: 30px;
				font-size: 16px;
				color: #404040;
				line-height: 24px;
				margin-bottom: 20px;
				margin-top: 25px;
				padding: 0 20px;
			}
			.news-date {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 20px;
				> i {
					color: #a6292f;
				}
				> span {
					font-size: 12px;
					color: #656565;
					padding-left: 10px;
				}
			}
		}
		.text-card {
			width: 100%;
			padding: 40px;
			background: #fff;
			border-bottom: 1px solid #e5e5e5;
			display: flex;
			flex-direction: row;
			margin-right: 25px;
			cursor: pointer;
			transition: all 0.3s;
			.date-box {
				.day {
					width: 76px;
					height: 75px;
					background-image: url('~@/assets/images/icons/list.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					font-size: 34px;
					line-height: 95px;
					margin-bottom: 8px;
					text-align: center;
					color: #999999;
					transition: all .3s;
				}
				.date {
					color: #999999;
					text-align: center;
					font-size: 16px;
					transition: all .3s;
				}
			}
			.content-box {
				flex: 1;
				padding-left: 40px;
				.title {
					font-size: 20px;
					margin-bottom: 20px;
					color: #333;
					font-weight: bold;
				}
				.desc {
					color: #444444;
					line-height: 28px;
					font-size: 16px;
					display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
					-webkit-line-clamp: 2; /* 行数，值可以改，表示展示X行后多余的缩略展示 */
					-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
					word-break: break-all;
					overflow: hidden;
				}
			}
			&:hover {
				box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.3);
				transform: translateY(-6px);
				.date-box {
					.day {
						background-image: url('~@/assets/images/icons/list-h.png');
						color: #a6292f;
					}
					.date {
						color: #a6292f;
					}
				}
			}
		}
	}
	.sub-content-box {
		.leader-board {
			width: 100%;
			.leader-head {
				display: flex;
				width: 100%;
				height: 48px;
				font-size: 18px;
				color: #222;
				flex-direction: row;
				align-items: center;
				> img {
					width: 24px;
					margin-right: 10px;
				}
			}
			.leader-content {
				width: 100%;
				.leader-item {
					width: 100%;
					height: 34px;
					display: flex;
					flex-direction: row;
					align-items: center;
					.dot {
						width: 3px;
						height: 3px;
						border-radius: 50%;
						background: #333;
					}
					.title {
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 14px;
						color: #5d5d5d;
						transition: all 0.3s;
						cursor: pointer;
						padding: 0 15px 0 10px;
						&:hover {
							color: #a6292f;
						}
					}
					.likes {
						font-size: 14px;
						color: #a6292f;
					}
				}
			}
		}
	}
	.page {
		height: 50px;
		margin-right: 25px;
	}
}
::v-deep .search .el-input__inner {
	border: none;
}
::v-deep .pagination-container .el-pagination {
	right: 20px !important;
}
</style>